<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=utf-8">
    <title>登录实践星</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <script crossorigin="anonymous"
            integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script crossorigin="anonymous" src="https://kit.fontawesome.com/487e95a78d.js"></script>
</head>

<body>
<header>
    <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand d-flex w-50 mr-auto" href="#" th:href="@{/}">实践星</a>
                <button class="navbar-toggler" data-target="#collapsingNavbar3" data-toggle="collapse"
                        type="button">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
                <ul class="navbar-nav w-100 justify-content-begin">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link" th:href="@{/logout}">退出</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <span style="color: #fff;">登录时间：<span th:text="${loginTime}"/></span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<div class="container">
    <div class="main">
        <section class="sign-in">
            <div class="form-container">
                <div th:if="${param.error}">
                    <div class="alert alert-danger">无效的用户名称或用户密码
                    </div>
                </div>
                <div th:if="${param.logout}">
                    <div class="alert alert-info">你已经退出实践星啦~</div>
                </div>

                <div class="signin-content">
                    <div class="signin-form">
                        <h2 class="form-title">登录实践星</h2>
                        <form class="register-form" method="POST" th:action="@{/login}">
                            <div class="form-group">
                                <label for="username"><i class="fa-solid fa-user"></i></label>
                                <input id="username" name="username" placeholder="电子邮箱" type="text">
                            </div>
                            <div class="form-group">
                                <label for="password"><i class="fa-solid fa-lock"></i></label>
                                <input id="password" name="password" placeholder="密码" type="password">
                            </div>
                            <div class="form-group">
                                <input class="agree-term" id="remember-me" name="remember-me" type="checkbox">
                                <label class="label-agree-term" for="remember-me">
                                    <span class="checkbox_checked_span">✓<span></span></span>
                                    记住我
                                </label>
                            </div>
                            <div class="form-group form-button">
                                <input class="form-submit btn btn-primary" id="signin" name="signin" type="submit"
                                       value="马上登录">
                            </div>
                        </form>
                        <div class="social-login">
                            <span class="social-label">或者</span>
                            <ul class="socials">
                                <li>
                                    <a href="#">
                                        <i class="display-flex-center titok fa-brands fa-tiktok"
                                           style="--fa-display: flex"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="display-flex-center facebook fa-brands fa-facebook-f"
                                           style="--fa-display: flex"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="display-flex-center twitter fa-brands fa-twitter"
                                           style="--fa-display: flex"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="signin-image">
                        <figure><img alt="sing up image" src="/images/signin.jpg"></figure>
                        <a class="signup-image-link" href="/" th:href="@{/registration}">创建新的实践星帐户</a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
</body>

</html>